iT邦幫忙

2022 iThome 鐵人賽

DAY 22
0
自我挑戰組

菜鳥前端修練之旅系列 第 22

Day 22 | Proxy

  • 分享至 

  • xImage
  •  

Proxy 是 ES6 新增的方法,用 Proxy 將物件包裝起來後,往後在操作此物件時都必須經過 Proxy,因此可以理解成攔截或是代理。

Proxy

Proxy 基本語法為:

let proxy = new Proxy(target, handler)

當中的 target、handler 代表:

  • target :要被代理的物件。
  • handler :代理過後要做的行為,包含 construct、get、set 等等。

以下是簡易範例:

let dog = {
    name: '來福',
    age: 6
}

dog = new Proxy(dog, {
    
    get(target, prop, receiver){
        // ...
    },
    set(target, prop, value, receiver){
        // ...
    }
})

handler 中除了 get、set 外還包含了 ownKeysgetOwnPropertyDescriptordeletePropertyisExtensibleapply 等方法,不過這篇文章只先筆記 get & set 兩種。

get

get 是取得屬性時會觸發的方法,從上面的範例中可以看到 get 帶了三個參數,分別是:

  • target:目標對象。
  • prop:目標屬性。
  • receiverProxy 本身。

實際將這些參數 log 出來:

get(target, prop, receiver){
    console.log(`target: ${target}`)
    console.log(`prop: ${prop}`)
    console.log(receiver)
}

// 觸發 get
dog['name']

既然知道三者代表的意思,我們可以設定某個值、或是某條件、私有變數禁止存取等。

get(target, prop, receiver){
    if(prop === 'name'){
        return "您無存取權限"
    }
},

set

set 在設定屬性時觸發,參數有四個:

set(target, prop, value, receiver){
    // ...
}

分別代表:

  • target:目標對象。
  • prop:目標屬性。
  • prop:目標屬性的值。
  • receiverProxy 本身。

用法和 get 類似,不過在結束時要 return 一個布林代表成功及失敗,避免發生 TypeError。

dog = new Proxy(dog, {
    set(target, prop, value, receiver){
        target[prop] = value
        return true
    }
})

dog['nickName'] = '小笨狗'

this

一旦使用了 proxy 代理 targettarget 的 this 就會指向 proxy

const obj = {
    get: function () {
        console.log(this === proxy)
    }
}

const proxy = new Proxy(obj, {})

obj.get()   // false
proxy.get() // true

參考資料


上一篇
Day 21 | 前端中的 Hash & History
下一篇
Day 23 | use strict
系列文
菜鳥前端修練之旅30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言